<template>
  <div class="h-[calc(100vh-64px)] flex">
    <Filter :data="gameInfo" @onChange="handleChange" />
    <div class="w-full h-full flex flex-col bg-[#F8F8F8] overflow-y-scroll px-40px py-10px">
      <h1 class="h-32px leading-32px text-32px font-bold text-#242633">{{ gameInfo.name }}</h1>
      <div class="w-full max-w-1120px">
        <template v-if="userList.length > 0">
          <div class="w-[fit-content] max-w-full flex flex-row flex-wrap">
            <UserItem v-for="user in userList" :key="user.id" :item="user" />
          </div>
          <LoadMore
            :total="total"
            :loading="loading"
            :pageInfo="pageInfo"
            @loadMore="handleLoadMore"
          />
        </template>
        <div class="w-full max-w-full flex flex-row flex-wrap items-center justify-center" v-else>
          <Empty title="暂无数据" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getOneGame } from '@/api/game'
import { getUserWithSkills } from '@/api/user'
import Filter from './components/filter.vue'
import UserItem from '@/views/home/components/user-item.vue'
import { useRoute } from 'vue-router'
import Empty from '@/components/empty/index.vue'
import LoadMore from '@/components/loadMore/index.vue'
const route = useRoute()
const gameId = Number(route.params.id)

const gameInfo = ref({})

const total = ref(0)
const filterData = {
  sex: 0,
  position_ids: '',
  rank_ids: ''
}
const bagePageInfo = {
  page: 0,
  pageSize: 10
}
const pageInfo = ref(bagePageInfo)
const loading = ref(false)
const userList = ref([])
const handleChange = (data) => {
  const { sex, position, rank } = data
  filterData.sex = sex
  filterData.position_ids = position.join(',')
  filterData.rank_ids = rank.join(',')
  pageInfo.value = bagePageInfo
  userList.value = []
  getUserList()
}
const handleLoadMore = () => {
  loading.value = true
  getUserList().finally(() => {
    loading.value = false
  })
}
const getUserList = () => {
  const { page, pageSize, rank_ids, position_ids, sex } = {
    ...pageInfo.value,
    ...filterData
  }
  return getUserWithSkills({
    id: gameId,
    pageSize,
    page: page + 1,
    rank_ids,
    position_ids,
    sex
  }).then((res) => {
    pageInfo.value = {
      page: res.page,
      pageSize: res.pageSize
    }
    userList.value = [...userList.value, ...(res.list || [])]
    total.value = res.total
  })
}
onMounted(() => {
  getOneGame(gameId).then((res) => {
    gameInfo.value = res
  })
  getUserList()
})
</script>
<style lang="less" scoped></style>
